<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>doge</title>
</head>

<body>
    <!-- <div style="border: 1px solid gray;text-align: center;">请点击任意一处生成小球</div> -->
</body>
<script>
    var body = document.body
    body.style.margin = '0px'
    body.style.padding = '0px'
    var main = document.createElement('div')
    main.id = 'main'
    main.style.height = '100vh'
    body.append(main)
    var mainMethons = document.getElementById('main')

    var circle_size_add = null;
    var circle_div_id = 0
    // let circle_color = ''
    let circle_background='./doge.jpg'
    var circle_size = 10
    function onmousedown_(e) {  //按下
        console.log("按下")
        circle_div_id++
        // for (var i = 0; i < 3; i++) {
        //     switch (i) {
        //         case 0:
        //             circle_color += Math.round(Math.random() * 255) + ',';
        //             break
        //         case 1:
        //             circle_color += Math.round(Math.random() * 255) + ',';
        //             break
        //         case 2:
        //             circle_color += Math.round(Math.random() * 255);
        //     }
        // }

        creat(e.clientX, e.clientY, circle_size, circle_background, circle_div_id)
        // 增大
        circle_size_add = setInterval(() => {
            circle_size = circle_size + 1
            console.log(circle_size, 999)
            var circle_ = document.getElementById(`${circle_div_id}`)
            circle_.style.height = circle_size + 'px'
            circle_.style.width = circle_size + 'px'
        }, 1)
        console.log("circle_div_id:" + circle_div_id)


    }
    function onmouseup_(e) {//放开
        console.log("放开")
        clearInterval(circle_size_add);
        circle_size = 10
        circle_color = ''
        var circle_ = document.getElementById(`${circle_div_id}`)
        startMove(circle_)
    }
    mainMethons.onmousedown = onmousedown_;  //注册鼠标按下时事件处理函数
    mainMethons.onmouseup = onmouseup_;  //注册鼠标松开时事件处理函数
    mainMethons.touchstart = onmousedown_;  //注册鼠标按下时事件处理函数
    mainMethons.touchend = onmouseup_;  //注册鼠标松开时事件处理函数


    //生成小球
    function creat(clientX, clientY, circle_size, circle_background, circle_div_id) {
        var creat = document.createElement('div') //只能是html标签名
        var doge = document.createElement("img")
        // let size = Math.random() * 100;//随机大小
        // creat.className = circle_color
        doge.style.height="100%";
        doge.style.width="100%";
        doge.style.borderRadius="50%"
        creat.id = circle_div_id
        doge.src=circle_background
        creat.style.height = circle_size + 'px'
        creat.style.width = circle_size + 'px'
        // creat.style.backgroundColor = `rgb(${circle_color})`
        // creat.style.backgroundImage=circle_background
        creat.style.borderRadius = '50%'
        creat.style.position = 'absolute' //脱离文档流就可以随便飘~
        creat.style.top = `${clientY}px`
        creat.style.left = `${clientX}px`
        creat.append(doge)
        main.append(creat)

    }
    //开始掉落

    function startMove(circle) {
        var Time = null;
        var speed = 0;
        // clearInterval(Time);   //clearTnterval(Time)://防止多次点击事件的产生
        Time = setInterval(function () {
            speed += 10;
            var T = circle.offsetTop + speed;
            if (T > document.documentElement.clientHeight - circle.offsetHeight) {
                T = document.documentElement.clientHeight - circle.offsetHeight;
                speed *= -1;//转换方向
                speed *= 1;//加速度
            }
            circle.style.top = T + 'px';
        }, 20)//定时器控制速度
    }
</script>

</html>